<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="icon" href="image/gobang.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>

<body>
    <div class="nav">五子棋对战</div>
    <!-- 整个界面的容器元素 -->
    <div class="container">
        <!-- 这个div在container中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match_button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: '/userInfo',
            success: function (body) {
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = '玩家:' + body.userName + '分数:' + body.score
                    + '<br> 比赛场次:' + body.totalCount + '获胜场数:' + body.winCount;
            },
            error: function () {
                alert("获取用户信息失败!");
            }
        });

        //此处进行初始化websocket,并且实现前端的匹配逻辑
        //此处的路径必须写出/findmatch,而不能写成/findMatch/
        let websocketUrl = 'ws://' + location.host + '/findMatch';
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function () {
            console.log("onopen");
        }
        websocket.onclose = function () {
            console.log("onclose");
        }
        websocket.onerror = function () {
            console.log("onerror");
        }
        //监听页面关闭事件,在页面关闭之前,手动调用这里的websocket的close方法.
        window.onbeforeunload = function () {
            websocket.close();
        }

        //一会重点来实现,要处理服务器返回的响应
        websocket.onmessage = function (e) {
            //处理服务器返回的响应数据,这个响应针对"开始匹配"/"结束匹配"来对应的
            //解析得到的响应对象,返回的数据是一个JSON字符串,解析成js对象
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector('#match_button');
            if (!resp.ok) {
                console.log("游戏大厅中接受到了失败的响应!" + resp.reason);
                return;
            }
            if (resp.message == 'startMatch') {
                //开始匹配请求发送成功
                console.log("进入匹配队列成功!");
                matchButton.innerHTML = '匹配中...(点击停止)';
            } else if (resp.message == 'stopMatch') {
                //结束匹配请求发送成功
                console.log("离开匹配队列成功!");
                matchButton.innerHTML = '开始匹配';
            } else if (resp.message == 'matchSuccess') {
                //已经匹配到了对手了
                console.log("匹配到对手!进入游戏房间!");
                //location.assign("/game_room.html");
                location.replace("/game_room.html");
            } else if (resp.message == 'repeatConnection') {
                //为了防止多开加了alert和跳转
                //如果多开,服务器主动跳转到login
                alert("当前检测到多开,亲使用其他账号登录!")
                location.assign("/login.html");
                //location.replace("/login.html");
            } else {
                console.log("收到了非法的响应! message:" + resp.message);
            }
        }

        let matchButton = document.querySelector('#match_button');
        if (matchButton) {
            let isMatching = false; // 新增状态变量
            matchButton.onclick = function () {
                if (websocket && websocket.readyState === websocket.OPEN) {
                    if (!isMatching) {
                        console.log("开始匹配");
                        websocket.send(JSON.stringify({
                            message: 'startMatch',
                        }));
                        matchButton.innerHTML = '匹配中...(点击停止)';
                        isMatching = true;
                    } else {
                        console.log("停止匹配");
                        websocket.send(JSON.stringify({
                            message: 'stopMatch',
                        }));
                        matchButton.innerHTML = '开始匹配';
                        isMatching = false;
                    }
                } else {
                    alert("当前您的连接已经断开,请重新登陆!");
                    location.assign('/login.html');
                    //location.replace("/login.html");
                }
            };
        } else {
            console.error("未找到匹配按钮！");
        }
        //给匹配按钮添加一个点击事件
        // let matchButton = document.querySelector('#match_button');
        // matchButton.onclick = function () {
        //     //在触发websocket请求之前,先确认一下websocket的连接是否好着
        //     if (websocket.readyState == websocket.OPEN) {
        //         //如果当前readStyle处在OPEN状态,就说明连接还好着呢
        //         //这里发送的数据有两种可能,开始匹配/停止匹配
        //         if (matchButton.innerHTML == '开始匹配') {
        //             console.log("开始匹配");
        //             websocket.send(JSON.stringify({
        //                 message: 'startMatch',
        //             }));
        //         } else if (matchButton.innerHTML == '匹配中...(点击停止)') {
        //             console.log("停止匹配");
        //             websocket.send(JSON.stringify({
        //                 message: 'stopMatch',
        //             }));
        //         }
        //     } else {
        //         //这是说明当前连接异常
        //         alert("当前您的连接已经断开,请重新登陆!");
        //         location.assign('/login.html');
        //     }
        // }
    </script>


</body>

</html>